<template>
  <view
    class="recommendBox"
    :style="[outModuleCss]"
    v-if="propsData.params.showModule"
  >
    <view :style="[moduleBgCss]" class="module-bg"></view>
    <view class="recommendContent">
      <view class="title">
        <text class="across"></text>
        <text class="line" style="margin-left: 10rpx"></text>
        <text style="margin: 0 32rpx">{{ $t("diy.toRecommend") }}</text>
        <text class="line" style="margin-right: 10rpx"></text>
        <text class="across"></text>
      </view>
      <view class="goodsList">
        <view
          class="goodsItem"
          v-for="item in goodsList"
          :key="item.id"
          @click.stop="$utils.toUrl('/goods/goods/goods?id=' + item.id)"
        >
          <view class="goodPic">
            <image :src="item.cover_pic" alt="" mode="aspectFill" />
          </view>
          <view class="goodInfo">
            <view class="goodName">
              {{ item.name }}
            </view>
            <view class="goodPrice">
              <view class="price">
                <text>￥</text>
                <text>{{ item.price }}</text>
              </view>
              <!-- <view class="vip">
                <text>￥1299.00</text>
                <img src="" alt="">
              </view> -->
              <view class="old">
                <text>￥{{ item.original_price }}</text>
              </view>
            </view>
            <view class="count">
              <text>{{ $t("goods.count") }}{{ item.virtual_sales }}</text>
              <!-- <text>95%好评</text> -->
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { diySysPageMixin } from "../../mixins/index";
export default {
  name: "userRecommend",
  props: {
    propsData: {
      type: Object,
      default: {},
    },
  },
  mixins: [diySysPageMixin],
  components: {},
  data() {
    return {
      goodsList: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      this.$allrequest.diyNew.getUserRecommendList({}).then((res) => {
        if (res.code == 0) {
          this.goodsList = res.data;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.recommendBox {
  width: 100%;
  position: relative;
  .module-bg {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
  }
  .recommendContent {
    width: 100%;
    .title {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      color: #262626;
      margin: 36rpx 0;
      .across {
        width: 48rpx;
        height: 1px;
        background-color: #cecece;
      }
      .line {
        width: 1px;
        height: 12rpx;
        background-color: #cecece;
      }
    }
    .goodsList {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      .goodsItem {
        width: 49%;
        border-radius: 16rpx;
        overflow: hidden;
        margin-bottom: 10rpx;
        .goodPic {
          width: 100%;
          height: 354rpx;
          background-color: #e4e4e4;
          image {
            width: 100%;
            height: 100%;
          }
        }
        .goodInfo {
          width: 100%;
          padding: 10rpx 16rpx;
          background-color: #fff;
          .goodName {
            width: 100%;
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: #262626;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            word-wrap: break-word;
          }
          .goodPrice {
            display: flex;
            align-items: baseline;
            flex-wrap: wrap;
            margin: 10rpx 0;
            view {
              margin-right: 16rpx;
            }
            .price {
              color: #f0250e;
              font-size: 24rpx;
              font-weight: 600;
              font-family: PingFang SC;
              text:nth-child(2) {
                font-size: 34rpx;
              }
            }
            .vip {
              display: flex;
              align-items: center;
              font-size: 24rpx;
              color: #262626;
              font-weight: 600;
              font-family: PingFang SC;
            }
            .old {
              font-size: 24rpx;
              color: #8c8c8c;
              font-family: PingFang SC;
              text-decoration: line-through;
            }
          }
          .count {
            display: flex;
            align-items: center;
            font-size: 24rpx;
            color: #8c8c8c;
            font-family: PingFang SC;
            text {
              margin-right: 12rpx;
            }
          }
        }
      }
    }
  }
}
</style>
